/** biome-ignore-all lint/a11y/noNoninteractiveTabindex: xxx */

import { CheckCircle, FileText, Home, LogIn, LogOut, Mail, Menu, Package, User, UserPlus, Users } from "lucide-react";
import { Link } from "react-router";
import useMeStore from "../../store/me";
import ThemeToggle from "../ui/ThemeToggle";

export default function AppNavbar() {
  const meStore = useMeStore();

  return (
    <nav className="navbar bg-base-100/80 backdrop-blur-md shadow-lg border-b border-base-200 sticky top-0 z-50">
      <div className="navbar-start">
        <div className="dropdown">
          <span className="btn btn-ghost lg:hidden hover:bg-primary/10">
            <Menu className="h-5 w-5" />
          </span>
          <ul className="menu menu-sm dropdown-content mt-3 z-[1] p-3 shadow-xl bg-base-100 rounded-2xl w-56 border border-base-200">
            <li className="animate-fade-in">
              <Link to="/" className="rounded-xl hover:bg-primary/10 transition-colors duration-200">
                <Home className="h-4 w-4" />
                首页
              </Link>
            </li>
            <li className="animate-fade-in" style={{ animationDelay: "0.1s" }}>
              <Link to="/demo" className="rounded-xl hover:bg-primary/10 transition-colors duration-200">
                <Package className="h-4 w-4" />
                产品
              </Link>
            </li>
            <li className="animate-fade-in" style={{ animationDelay: "0.2s" }}>
              <Link to="/" className="rounded-xl hover:bg-primary/10 transition-colors duration-200">
                <CheckCircle className="h-4 w-4" />
                服务
              </Link>
            </li>
            <li className="animate-fade-in" style={{ animationDelay: "0.3s" }}>
              <Link to="/" className="rounded-xl hover:bg-primary/10 transition-colors duration-200">
                <Users className="h-4 w-4" />
                关于我们
              </Link>
            </li>
            <li className="animate-fade-in" style={{ animationDelay: "0.4s" }}>
              <Link to="/" className="rounded-xl hover:bg-primary/10 transition-colors duration-200">
                <Mail className="h-4 w-4" />
                联系我们
              </Link>
            </li>
          </ul>
        </div>
        <Link
          to="/"
          className="btn btn-ghost normal-case text-xl font-bold bg-gradient-primary bg-clip-text text-transparent hover:scale-105 transition-transform duration-200"
        >
          <span className="flex items-center gap-2">
            <div className="w-8 h-8 bg-gradient-primary rounded-lg flex items-center justify-center">
              <span className="text-white font-bold">P</span>
            </div>
            Paimon
          </span>
        </Link>
      </div>
      <div className="navbar-center hidden lg:flex">
        <ul className="menu menu-horizontal px-1 gap-2">
          <li>
            <Link to="/" className="rounded-xl hover:bg-primary/10 transition-all duration-200 hover:scale-105">
              <Home className="h-4 w-4" />
              首页
            </Link>
          </li>
          <li>
            <Link to="/demo" className="rounded-xl hover:bg-primary/10 transition-all duration-200 hover:scale-105">
              <Package className="h-4 w-4" />
              产品
            </Link>
          </li>
          <li>
            <Link to="/" className="rounded-xl hover:bg-primary/10 transition-all duration-200 hover:scale-105">
              <CheckCircle className="h-4 w-4" />
              服务
            </Link>
          </li>
          <li>
            <Link to="/" className="rounded-xl hover:bg-primary/10 transition-all duration-200 hover:scale-105">
              <Users className="h-4 w-4" />
              关于我们
            </Link>
          </li>
          <li>
            <Link to="/" className="rounded-xl hover:bg-primary/10 transition-all duration-200 hover:scale-105">
              <Mail className="h-4 w-4" />
              联系我们
            </Link>
          </li>
        </ul>
      </div>
      <div className="navbar-end inline-flex gap-3 pr-4">
        {/* Theme Toggle */}
        <ThemeToggle />

        {meStore.me.type === "init" ? (
          <>
            <Link to="/login" className="btn btn-outline btn-primary hover-lift">
              <LogIn className="h-4 w-4" />
              登录
            </Link>
            <Link to="/register" className="btn btn-primary bg-gradient-primary border-0 hover-lift">
              <UserPlus className="h-4 w-4" />
              注册
            </Link>
          </>
        ) : meStore.me.type === "loading" ? (
          <div className="flex items-center gap-2">
            <span className="loading loading-spinner loading-sm"></span>
            <span className="text-sm text-base-content/70">加载中...</span>
          </div>
        ) : (
          <div className="flex items-center gap-3">
            <Link
              to="/articles"
              className="btn btn-ghost btn-sm hover:bg-primary/10 rounded-xl transition-colors duration-200"
            >
              <FileText className="h-4 w-4" />
              我的文章
            </Link>
            <div className="dropdown dropdown-end">
              <button
                type="button"
                className="btn btn-ghost btn-circle avatar hover:bg-primary/10 transition-colors duration-200"
              >
                <div className="w-8 h-8 rounded-full bg-gradient-primary flex items-center justify-center text-white font-semibold">
                  {meStore.me.data.nickname.charAt(0).toUpperCase()}
                </div>
              </button>
              <ul className="mt-3 z-[1] p-3 shadow-xl menu menu-sm dropdown-content bg-base-100 rounded-2xl w-52 border border-base-200">
                <li className="animate-fade-in">
                  <Link
                    to="/settings/profile"
                    className="rounded-xl hover:bg-primary/10 transition-colors duration-200"
                  >
                    <User className="h-4 w-4" />
                    个人资料
                  </Link>
                </li>
                <li className="animate-fade-in" style={{ animationDelay: "0.1s" }}>
                  <button
                    type="button"
                    className="rounded-xl hover:bg-error/10 text-error transition-colors duration-200 w-full text-left"
                  >
                    <LogOut className="h-4 w-4" />
                    退出登录
                  </button>
                </li>
              </ul>
            </div>
          </div>
        )}
      </div>
    </nav>
  );
}
